<!-- 新增外出 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <el-form ref="ruleFormRef" style="max-width: 450px" :model="ruleForm" :rules="rules" label-width="auto"
        status-icon>
        <el-form-item label="选择外出老人:">
          <el-input v-model="elderlyData.name" disabled />
        </el-form-item>
        <el-form-item label="外出时间:">
          <el-date-picker v-model="dateRange" type="daterange" clearable unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" @change="datachange" />
        </el-form-item>
        <el-form-item label="陪同人员类型:" prop="relation">
          <el-select v-model="ruleForm.relation" placeholder="请选择" clearable>
            <el-option v-for="item in relationList" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="陪同人员姓名:" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="陪同人员电话:" prop="mobile">
          <el-input v-model="ruleForm.mobile" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="陪同人员地址:" prop="address">
          <el-input v-model="ruleForm.address" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="外出原因:" prop="content">
          <el-input v-model="ruleForm.content" type="textarea" placeholder="请输入外出原因" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getElderlyModel } from '@/api/market/elderly/elderly'
import { goOutAdd, goOutGet, goOutUpdate } from '@/api/care/goOut/goOut'
import { goAddParams, goListData } from '@/api/care/goOut/type'
import dayjs from 'dayjs'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

// 编辑数据id
const editId = route.query.id as unknown as number
const elderlyId = route.query.oldId as unknown as number // 老人id

const ruleForm = reactive<goAddParams>({
  id: 0,
  elderlyId: elderlyId,
  startTime: '',
  endTime: '',
  mobile: '',
  address: '',
  content: '',
  relation: '',
  name: '',
})

// 陪同人员类型
let relationList = ref(['父子', '母子', '父女', '母女', '兄弟', '姐妹', '朋友', '其他', '本人', '护理人员'])

// 获取单条老人数据
let elderlyData = ref({
  name: '',
})
const getListElderly = async () => {
  let res = await getElderlyModel(elderlyId)
  elderlyData.value = res
}


// 获取单条数据
const dateRange = ref<[string, string]>(['', ''])
const getData = async () => {
  let res = await goOutGet(editId)
  elderlyData.value.name = res.elderlyName
  Object.assign(ruleForm, res)
  dateRange.value = [res.startTime, res.endTime]
}

// 添加
const submitForm = async () => {
  ruleForm.startTime = dayjs(ruleForm.startTime).format('YYYY-MM-DD')
  ruleForm.endTime = dayjs(ruleForm.endTime).format('YYYY-MM-DD')
  await goOutAdd(ruleForm)
  // console.log('添加', res);
  ElMessage.success('添加成功')
  router.push('/care/goOut')
}

// 编辑
const update = async () => {
  ruleForm.startTime = dayjs(ruleForm.startTime).format('YYYY-MM-DD')
  ruleForm.endTime = dayjs(ruleForm.endTime).format('YYYY-MM-DD')
  await goOutUpdate(ruleForm)
  // console.log('编辑', res);
  ElMessage.success('编辑成功')
  router.push('/care/goOut')
}

const submit = () => {
  ruleFormRef.value?.validate(async (valid) => {
    if (valid) {
      ruleForm.id === 0 ? await submitForm() : await update();
    }
  });
}

// 取消
const cancel = () => {
  router.push('/care/goOut')
}

// 日期
const datachange = (e: any) => {
  console.log('日期', e);
  if (e != null) {
    ruleForm.startTime = e[0];
    ruleForm.endTime = e[1];
  } else {
    ruleForm.startTime = "";
    ruleForm.endTime = "";
  }
};

// 表单校验
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<any>>({
  relation: [
    { required: true, message: '请选择陪同人员类型', trigger: 'change', },
  ],
  name: [
    { required: true, message: '请输入陪同人员姓名', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '请输入陪同人员手机号', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '请输入陪同人员地址', trigger: 'blur' },
  ],
  content: [
    { required: true, message: '请输入外出原因', trigger: 'blur' },
  ],
})

onMounted(() => {
  getListElderly()
  getData()
})

</script>

<style scoped lang="less"></style>
